<!-- 会计科目->辅助总账 -->
<template>
    <div class="content-wrapper a-base-container">
        <div class="requisition-set-wrapper">
            <!-- 按钮 -->
            <!--<div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="searchDynamic">
                                <a-icon class="btns-icon" type="search" />
                                <div class="btns-text">查询</div>
                            </div>
                        </a-col>
                         <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns">
                                <a-icon class="btns-icon" type="unordered-list" />
                                <div class="btns-text">明细账</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="printOrder">
                                <a-icon class="btns-icon" type="export" />
                                <div class="btns-text">导出</div>
                            </div>
                        </a-col>
                        <a-col :xs="btn_grid.xs" :sm="btn_grid.sm" :md="btn_grid.md" :lg="btn_grid.lg" :xl="btn_grid.xl">
                            <div class="btns" @click="printOrder">
                                <a-icon class="btns-icon" type="printer" />
                                <div class="btns-text">打印</div>
                            </div>
                        </a-col> 
                    </a-col>
                </a-row>
            </div>-->
            <div ref="print" class="credentials-wrapper" id="documents-wrapper">
                <h3 class="text-center" style="border-bottom:1px solid #ccc;line-height:60px;margin-bottom:0;">
                    <span class="text-name">{{typeName}}辅助总账</span><br>
                </h3>
                <div style="display:flex;height:calc(100% - 61px)">
                    <div style="flex:0 0 200px;height:100%;border-right:1px solid #ccc;">
                        <account-tree @backData="backData" :isAuxacc="true"></account-tree>
                    </div>

                    <div style="min-height:200px;flex:1;padding:10px;">

                        <div class="date-tp">
                            <div class="bills-box-header">
                                <div class="filter">
                                    <div class="filter-label">科目名称:</div>
                                    <div class="filter-control">
                                        <div style="line-height:32px;display: table-cell;text-align:left;padding-left:10px;">{{name}}</div>
                                        <!-- <a-input @click="searchGroup(1)" @change="searchGroup(2)" v-model="code" autocomplete="off" placeholder="请选择科目名称"></a-input>
                                    <searchGroupHeader ref="credentialsSearch" :inputValue="code" :componentName="'accountingRadio'" @clickItem="setValue" :searchData="searchData"></searchGroupHeader> -->
                                    </div>
                                </div>
                                <div class="filter">
                                    <div class="filter-label">期间:</div>
                                    <div class="filter-control">
                                        <a-select style="width:45%" placeholder="开始月份" v-model="planData.beginDate" @change="((date,dateString)=>{handlerMonth(date,dateString,1)})">
                                            <a-select-option v-for="(item,index) in monthArray" :key="index" :value="item">
                                                {{item}}
                                            </a-select-option>
                                        </a-select>至
                                        <a-select style="width:45%" placeholder="结束月份" v-model="planData.endDate" @change="((date,dateString)=>{handlerMonth(date,dateString,2)})">
                                            <a-select-option v-for="(item,index) in monthArray" :key="index" :value="item">
                                                {{item}}
                                            </a-select-option>
                                        </a-select>
                                    </div>
                                </div>
                                <div class="filter" style="height:38px;line-height:38px">
                                    <label class="filter-label"></label>
                                    <div class="filter-control">
                                        <a-checkbox @click="searchPlan" v-model="planData.isNoBookkeeping">是否包含未记账</a-checkbox>
                                    </div>
                                </div>
                                <div class="filter" v-if="typeName == '客户往来'">
                                    <div class="filter-label">客户:</div>
                                    <div class="filter-control" style="position:relative">
                                        <div style="background:rgba(0,0,0,0);width:100%;height:28px;z-index:2;position:absolute;top:10px;left:0;" @click="handleSearch('crmRef')"></div>
                                        <a-input-search placeholder="请选择客户" v-model="planData.crmName" size="small" @search="handleSearch('crmRef')" />

                                        <form-search-group ref="crmRef" :dynamicData="{name:'客户',val:'crm',code:'crmName',value:planData.crmName}" @clickItem="searchSetValue"></form-search-group>
                                    </div>
                                </div>
                                <div class="filter" v-if="typeName == '供应商往来'">
                                    <div class="filter-label">供应商:</div>
                                    <div class="filter-control" style="position:relative">
                                        <div style="background:rgba(0,0,0,0);width:100%;height:28px;z-index:2;position:absolute;top:10px;left:0;" @click="handleSearch('supplieRef')"></div>
                                        <a-input-search placeholder="请选择供应商" v-model="planData.vendorName" size="small" @search="handleSearch('supplieRef')" />

                                        <form-search-group ref="supplieRef" :dynamicData="{name:'供应商',val:'supplie',code:'supplieName',value:planData.vendorName}" @clickItem="searchSetValue"></form-search-group>
                                    </div>
                                </div>
                                <div class="filter" v-if="typeName == '个人往来'">
                                    <div class="filter-label">个人:</div>
                                    <div class="filter-control" style="position:relative">
                                        <div style="background:rgba(0,0,0,0);width:100%;height:28px;z-index:2;position:absolute;left:0;" @click="handleSearch('userRef')"></div>
                                        <a-input-search placeholder="请选择个人" v-model="planData.userName" size="small" @search="handleSearch('userRef')" />

                                        <form-search-group ref="userRef" :dynamicData="{name:'个人',val:'employees',code:'userName',value:planData.userName}" @clickItem="searchSetValue"></form-search-group>
                                    </div>
                                </div>
                                <div class="filter" v-if="typeName == '部门'">
                                    <div class="filter-label">部门:</div>
                                    <div class="filter-control" style="position:relative">
                                        <div style="background:rgba(0,0,0,0);width:100%;height:28px;z-index:2;position:absolute;left:0;" @click="handleSearch('officeRef')"></div>
                                        <a-input-search placeholder="请选择部门" v-model="planData.officeName" size="small" @search="handleSearch('officeRef')" />

                                        <form-search-group ref="officeRef" :dynamicData="{name:'部门',val:'office',code:'officeName',value:planData.officeName}" @clickItem="searchSetValue"></form-search-group>
                                    </div>
                                </div>
                                <div class="filter" v-if="typeName == '项目'">
                                    <div class="filter-label">项目:</div>
                                    <div class="filter-control" style="position:relative">
                                        <div style="background:rgba(0,0,0,0);width:100%;height:28px;z-index:2;position:absolute;left:0;" @click="handleSearch('projectRef')"></div>
                                        <a-input-search placeholder="请选择项目" v-model="planData.projectName" size="small" @search="handleSearch('projectRef')" />

                                        <form-search-group ref="projectRef" :dynamicData="{name:'项目',val:'project',code:'projectName',value:planData.projectName}" @clickItem="searchSetValue"></form-search-group>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <section>
                            <a-row>
                                <a-col :span="24">
                                    <div class="table-box">
                                        <a-table id="bills_tb" :scroll="{ x: 1000, y: 500 }" :columns="columns" :data-source="dataSource" :pagination="false" :size="small" bordered>
                                            <template slot="debitAmount" slot-scope="text">
                                                <div>{{text | NumFormat}}</div>
                                            </template>
                                            <template slot="creditAmount" slot-scope="text">
                                                <div>{{text | NumFormat}}</div>
                                            </template>
                                            <template slot="endAmount" slot-scope="text">
                                                <div>{{text | NumFormat}}</div>
                                            </template>
                                        </a-table>
                                    </div>
                                </a-col>
                            </a-row>
                            <div class="edit-mask" v-show="editMask">
                                <!-- 遮罩（点击修改关闭遮罩） -->
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>

        <!--加载中-->
        <div class="loading-wrapper" v-show="loading">
            <a-spin class="loading-content" tip="加载中..." />
        </div>
        <!--用做横向打印-->
        <div v-html="stylePrint"></div>

    </div>
</template>
<script>

import { searchWrapper } from '@/components/SearchWrapper/';
import moment from "moment";
import searchGroupHeader from "@/components/Finance/searchGroupHeader";
import FormSearchGroup from '@/components/Form/FormSearchGroup';
import { save, getNowAccount } from '@/api/finance/accountingSearch';
import { searchDetails } from '@/api/finance/subjectsBalance';//辅助 明细 列表查询

import accountTree from "@/components/Finance/accountTree"
import { getList as financeList } from '@/api/finance/accountingSearch';//财务查询方案

export default {
    components: {
        searchWrapper,
        searchGroupHeader,
        FormSearchGroup,        //搜索选择
        accountTree
    },
    data () {
        return {
            //----------↓样式----------
            btn_grid: {
                xs: 2,
                sm: 2,
                md: 2,
                lg: 2,
                xl: 2
            },
            //----------↑样式----------
            columns: [
                {
                    title: '会计期间',
                    key: 'periodDate',
                    dataIndex: 'periodDate',
                    width: 100,
                    align: 'center'
                },
                {
                    title: '摘要',
                    key: 'title',
                    dataIndex: 'title',
                    width: 100,
                },
                {
                    title: '科目编码',
                    dataIndex: 'accountingCode',
                    width: 80,
                    align: 'center'
                },
                {
                    title: '科目名称',
                    dataIndex: 'accountingName',
                    width: 80,
                    align: 'center',
                },
                // {
                //     title: '期初方向',
                //     dataIndex: 'beginAmountDirection',
                //     width: 80,
                //     customRender: (text) => {
                //         return text == 1 ? '借' : text == 2 ? '贷' : '平';
                //     }
                // }, 
                // {
                //     title: '期初金额',
                //     dataIndex: 'beginAmount',
                //     width: 100,
                //     scopedSlots: {
                //         customRender: 'beginAmount'
                //     },
                //     align: 'right',
                // }, 
                {
                    title: '借方',
                    dataIndex: 'debitAmount',
                    width: 100,
                    scopedSlots: {
                        customRender: 'debitAmount'
                    },
                    align: 'right',
                }, {
                    title: '贷方',
                    dataIndex: 'creditAmount',
                    width: 100,
                    align: 'right',
                    scopedSlots: {
                        customRender: 'creditAmount'
                    },
                }, {
                    title: '方向',
                    dataIndex: 'endAmountDirection',
                    width: 40,
                    align: 'center',
                    customRender: (text) => {
                        return text == 1 ? '借' : text == 2 ? '贷' : '平';
                    }
                }, {
                    title: '余额',
                    dataIndex: 'endAmount',
                    width: 100,
                    align: 'right',
                    scopedSlots: {
                        customRender: 'endAmount'
                    }
                }],
            name: null,
            code: null,
            dataSource: [],
            beginDate: null,
            endDate: null,
            setTime: null,  //延迟请求
            endOpen: false,
            beginDepthArray: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            endDepthArray: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            planData: {
                beginDate: null,
                endDate: null,
                currencyId: null,
                currencyName: null,
                // isEndNode: false,//是否末级
                isNoBookkeeping: false,//是否包含未记账
                beginCode: null,
                endCode: null,
                accountingName: null,
                // beginDepth: 1,
                // endDepth: 9,
                type: 5,//方案分类（往来单位明细帐）
                isDefaultPlan: true,

                crmName: null,
                crmId: null,
                vendorName: null,
                vendorId: null,
                userName: null,
                userId: null,
                officeName: null,
                officeId: null,
                projectName: null,
                projectId: null,

                isShowDetail: 0,
                isDayBook: 0,

                isTypeKH: false,//是否是客户
                isTypeGYS: false,//是否是供应商
            },
            monthArray: [],
            accountBeginDate: null,//账套开始日期
            accountEndDate: null,//账套结束日期

            searchData: {//搜索条件
                // isAuxaccCustomer: 1,//辅助中勾选客户往来的数据
                // isAuxaccSupplier: 1,//辅助中勾选供应商往来的数据
                searchType: 2,
                isEndNode: 1,//是否是末级
            },

            accountId: null,
            myPlanList: [],
            planActive: 0,
            updatePlanList: true,

            typeName: null,

        };
    },
    created () {
        this.getNowAccount();//获取当前账套
        // this.getMyselfPlan();
    },
    mounted () {
        //判断是否有科目（第一次弹窗）
        // if (this.planData.beginCode == null || this.planData.beginCode == '') {
        //     this.searchDynamic();
        // }
    },
    methods: {
        moment,
        printOrder () {
            //打印
            this.$print(this.$refs.print);
        },
        //动态查询搜索条件
        searchDynamic () {
            this.$refs.searchWrapperRef.showModel();
        },
        searchGroup (t) {
            if (t == 1) {
                this.$refs.credentialsSearch.showModal();
            } else {
                //延迟请求
                if (this.setTime) {
                    clearTimeout(this.setTime)
                }
                this.setTime = setTimeout(() => {
                    this.$refs.credentialsSearch.inputSearch();
                }, 500)
            }
        },
        setValue (data) {
            this.name = data.name;
            this.code = data.code;

            if (!this.planData.beginDate || !this.planData.endDate) {
                this.$message.warning('请选择方案！');
                return;
            }

            if (!this.planData.beginCode) {
                this.$message.warning('请选择方案！');
                return;
            }

            if (!this.planData.beginDepth && !this.planData.endDepth && this.planData.isEndNode === false) {
                this.$message.warning('请选择方案！');
                return;
            }

            this.planData.beginCode = data.code;

            this.planData.endCode = data.code;

            !this.planData.isEndNode ? this.planData.isEndNode = 0 : this.planData.isEndNode = 1;//是否末级
            !this.planData.isNoBookkeeping ? this.planData.isNoBookkeeping = 0 : this.planData.isNoBookkeeping = 1;//是否包含未记账


            searchDetails(resData).then(res => {
                if (res.code === 200) {
                    this.dataSource = res.data.records;
                }
            })


        },
        handlerMonth (e, v, t) {
            console.log(e, v, t)
            if (t == 1) {
                this.$set(this.planData, 'beginDate', e);
                this.planData.beginDate = e;
            } else {
                this.$set(this.planData, 'endDate', e);
                this.planData.endDate = e;
            }
            this.searchPlan();
        },
        handleSearch (n) {
            console.log(n);
            this.$refs[`${n}`].showModal();
        },
        searchSetValue (data) {
            if (data.codesName == "currencyId") {
                //币种
                // this.planData.currencyId = data.id;
                // this.planData.currencyName = data.name;
                this.$set(this.planData, 'currencyId', data.id);
                this.$set(this.planData, 'currencyName', data.name);
            } else if (data.codesName == "accounting") {
                this.$set(this.planData, 'beginCode', data.code);
                this.$set(this.planData, 'endCode', data.code);
                this.$set(this.planData, 'accountingName', data.name);

                this.planData.crmName = null;
                this.planData.crmId = null;
                this.planData.vendorName = null;
                this.planData.vendorId = null;

                if (data.isAuxaccCustomer == true) {//辅助中勾选客户往来的数据
                    this.planData.isTypeKH = true;//是否是客户
                } else {
                    this.planData.isTypeKH = false;//是否是客户
                }
                if (data.isAuxaccSupplier == true) {//辅助中勾选供应商往来的数据
                    this.planData.isTypeGYS = true;//是否是供应商
                } else {
                    this.planData.isTypeGYS = false;//是否是供应商
                }

            } else if (data.codesName == "crmName") {
                this.$set(this.planData, 'crmName', data.name);
                this.$set(this.planData, 'crmId', data.id);
            } else if (data.codesName == "supplieName") {
                this.$set(this.planData, 'vendorName', data.name);
                this.$set(this.planData, 'vendorId', data.id);
            } else if (data.codesName == "userName") {
                this.$set(this.planData, 'userName', data.name);
                this.$set(this.planData, 'userId', data.id);
            } else if (data.codesName == "officeName") {
                this.$set(this.planData, 'officeName', data.name);
                this.$set(this.planData, 'officeId', data.id);
            } else if (data.codesName == "projectName") {
                this.$set(this.planData, 'projectName', data.name);
                this.$set(this.planData, 'projectId', data.id);
            }
            console.log('this.planData', this.planData);

            this.searchPlan();
        },
        savePlan (data) {
            //保存方案
            let postData = this.planData;

            // if (!postData.beginCode) {
            //     this.$message.warning('科目编码必须填写！');
            //     return;
            // }

            // if (!postData.beginDepth && !postData.endDepth && postData.isEndNode === false) {
            //     this.$message.warning('级次和是否是末级必须填选一项！');
            //     return;
            // }

            // if (postData.beginDepth && postData.endDepth) {
            //     if (postData.beginDepth > postData.endDepth) {
            //         this.$message.warning('开始级次必须小于结束级次');
            //         return;
            //     }
            // }

            if (postData.isTypeKH && postData.crmId == null) {
                this.$message.warning('客户必须选择');
                return;
            }

            if (postData.isTypeGYS && postData.vendorId == null) {
                this.$message.warning('供应商必须选择');
                return;
            }

            !this.planData.isEndNode ? postData.isEndNode = 0 : postData.isEndNode = 1;//是否末级
            !this.planData.isNoBookkeeping ? postData.isNoBookkeeping = 0 : postData.isNoBookkeeping = 1;//是否包含未记账
            postData.name = data.name;

            if (data.saveType == 2) {
                postData.id = data.id;
            } else {
                postData.id = null;
            }


            save(postData).then(response => {
                if (response.code === 200) {
                    this.$message.success('保存成功');
                    // this.getMyselfPlan();
                    this.$refs.searchWrapperRef.getMyselfPlan();
                    this.$refs.searchWrapperRef.saveAsPlanClose();//关闭输入方案名称弹窗
                    this.$refs.searchWrapper.saveAsName = '';
                }
            }).catch((e) => {
                // this.$message.error('请求出错', 1)
            })
        },
        setWarpperData (data) {
            //给搜索方案中植入值
            this.planData = Object.assign({}, this.planData, _.cloneDeep(data));
            data.crmId != null ? this.planData.isTypeKH = true : this.planData.isTypeKH = false;
            data.vendorId != null ? this.planData.isTypeGYS = true : this.planData.isTypeGYS = false;
        },
        getNowAccount () {
            //获取当前账套
            getNowAccount().then(res => {
                if (res.code === 200) {
                    console.log(res);
                    this.monthArray = [];
                    this.accountBeginDate = res.data.beginDate;
                    this.accountEndDate = res.data.endDate;


                    let accountMonthBegin = this.accountBeginDate.split('-');
                    let accountMonthEnd = this.accountEndDate.split('-');

                    let year = accountMonthBegin[0];
                    let month = parseInt(accountMonthBegin[1]);

                    let monthEnd = accountMonthEnd[1];
                    console.log(year, month, monthEnd);

                    for (let i = month; i <= monthEnd; i++) {
                        let m = year + '-' + (i < 10 ? '0' + i : i);
                        this.monthArray.push(m);
                    }

                    this.planData.beginDate = this.monthArray[0];
                    this.planData.endDate = moment().format('YYYY-MM');
                    // this.planData.endDate = this.monthArray[this.monthArray.length - 1];
                }
            })
        },
        stystemSearch () {
            //点击默认方案清空数据
            this.planData.id = null;
            this.planData.isEndNode = null;//是否末级
            this.planData.isNoBookkeeping = null;//是否包含未记账
            this.planData.beginCode = null;
            this.planData.endCode = null;
            this.planData.accountingName = null;
            this.planData.beginDepth = null;
            this.planData.endDepth = null;
            this.planData.isDefaultPlan = true;

            this.planData.crmName = null;
            this.planData.crmId = null;
            this.planData.vendorName = null;
            this.planData.vendorId = null;
            this.planData.userName = null;
            this.planData.userId = null;

            this.planData.isTypeKH = false;//是否是客户
            this.planData.isTypeGYS = false;//是否是供应商

            this.name = null;
            this.code = null;
            this.accountId = null;
        },
        backData (data) {
            console.log(data)
            if (!data.name) {
                return;
            }
            this.accountId = data.id;
            this.name = data.name;
            this.code = data.code;

            this.planData.auxiliaryType = data.type;
            //辅助类型:1客户2供应商3个人4部门5项目
            this.typeName = data.type == 1 ? '客户往来' : data.type == 2 ? '供应商往来' : data.type == 3 ? '个人往来' : data.type == 4 ? '部门' : data.type == 5 ? '项目' : '';

            this.columns.forEach((item, index) => {
                if (item.dataIndex == 'crmName' || item.dataIndex == 'vendorName' || item.dataIndex == 'officeName' || item.dataIndex == 'userName' || item.dataIndex == 'projectName') {
                    this.columns.splice(index, 1);
                }
            })

            if (data.type === 1) {
                this.columns.splice(0, 0, {
                    title: '客户',
                    dataIndex: 'crmName',
                    width: 100,
                });
            } else if (data.type === 2) {
                this.columns.splice(0, 0, {
                    title: '供应商',
                    dataIndex: 'vendorName',
                    width: 100,
                });
            } else if (data.type === 3) {
                this.columns.splice(0, 0, {
                    title: '个人',
                    dataIndex: 'userName',
                    width: 100,
                });
            } else if (data.type === 4) {
                this.columns.splice(0, 0, {
                    title: '部门',
                    dataIndex: 'officeName',
                    width: 100,
                });
            } else if (data.type === 5) {
                this.columns.splice(0, 0, {
                    title: '项目',
                    dataIndex: 'projectName',
                    width: 100,
                });
            }

            this.searchPlan();
        },
        searchAll () {
            this.planActive = 0;
            this.stystemSearch();
            setTimeout(() => {
                this.searchPlan();
            }, 800)
        },
        searchPlan (t) {
            if (t) {
                this.planData = Object.assign(this.planData, _.cloneDeep(t));
                this.planActive = t.id;
            }

            this.planData.beginCode = this.code;
            this.planData.accountingName = this.name;
            this.planData.accountingId = this.accountId;

            //搜索列表数据
            let resData = {};
            resData.size = -1;
            if (this.planData.isDefaultPlan) {
                //如果是默认方案
                if (!this.planData.beginDate || !this.planData.endDate) {
                    this.$message.warning('开始月份和结束月份必须选择！');
                    return;
                }

                // if (!this.planData.beginCode) {
                //     this.$message.warning('科目编码必须填写！');
                //     return;
                // }

                if (!this.planData.beginDepth && !this.planData.endDepth && this.planData.isEndNode === false) {
                    this.$message.warning('级次和是否是末级必须填选一项！');
                    return;
                }

                if (this.planData.beginDepth && this.planData.endDepth) {
                    if (this.planData.beginDepth > this.planData.endDepth) {
                        this.$message.warning('开始级次必须小于结束级次');
                        return;
                    }
                }

                if (this.planData.isTypeKH && this.planData.crmId == null) {
                    this.$message.warning('客户必须选择');
                    return;
                }

                if (this.planData.isTypeGYS && this.planData.vendorId == null) {
                    this.$message.warning('供应商必须选择');
                    return;
                }

                !this.planData.isEndNode ? this.planData.isEndNode = 0 : this.planData.isEndNode = 1;//是否末级
                !this.planData.isNoBookkeeping ? this.planData.isNoBookkeeping = 0 : this.planData.isNoBookkeeping = 1;//是否包含未记账
            }
            resData = Object.assign({}, resData, this.planData);

            searchDetails(resData).then(res => {
                if (res.code === 200) {
                    this.dataSource = res.data;
                    // this.$refs.searchWrapperRef.cancel();//关闭弹窗
                }
            })
        },
        getMyselfPlan () {
            //获取个人方案列表
            financeList({ type: this.planData.type }).then((res) => {
                if (res.code == 200) {
                    console.log(res);
                    this.updatePlanList = false;
                    setTimeout(() => {
                        this.updatePlanList = true;
                        this.myPlanList = res.data;
                    }, 500)
                }
            }).catch((e) => {
                // this.$message.error('请求出错', 1)
            })
        },
    }
};
</script>
<style lang="less" scoped>
    @import '~@/style/purchase/voucher.less';

    .credentials-wrapper {
        padding: 0px !important;
        height: 100% !important;
        height: auto;
        overflow-y: auto;
        font-size: 14px;
        .date-tp {
            margin-bottom: 10px;
            .header-tp {
                text-align: left;
            }
        }
        .footer-tp {
            text-align: center;
            margin-top: 10px;
        }

        .text-name {
            // border-bottom: 2px solid rgba(0, 0, 0, 0.8);
            padding-bottom: 5px;
        }

        .bills-box-header {
            display: flex;
            justify-content: space-around;
            .filter {
                display: table;
                width: 280px;
                margin-bottom: 5px;
                .filter-label {
                    display: table-cell;
                    font-weight: normal;
                    max-width: 160px;
                    line-height: 32px;
                    white-space: nowrap;
                    vertical-align: baseline;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
                .filter-control {
                    display: table-cell;
                    width: 100%;
                }
            }
        }
    }
</style>